<template>
	<view style="position: relative;">
		<HeaderVue title="报名"></HeaderVue>
		<scroll-view style="height: 100vh" scroll-y="true">
			<view  style="padding: 40rpx 40rpx 240rpx 40rpx;overflow-y: scroll;">
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							选择类别
						</view>
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							选择组别
						</view>
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							学校/机构
						</view>
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							名称
						</view>
					</view>
					<view class="tip">
						PS:请规范填写学校或机构全称
					</view>
					<view class="tip">
						例:昆山市实验小学。(填写时一律不分校区)
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择学校
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
					<view class="bg row-h-center">
						<input placeholder="没有我的学校/机构，请手动输入" placeholder-class="hint" class="selected" >
						</input>
					</view>
				</view>
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							作品名称
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected">
						</input>
					</view>
				</view>
				
				<view class="item">
					<view class="row-h-center">
						<view class="title">
							指导老师
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected">
						</input>
					</view>
				</view>
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							家长或指导老师的联系电话
						</view>
					</view>
					<view class="bg row-h-center">
						<input placeholder="请输入" placeholder-class="hint" class="selected">
						</input>
					</view>
				</view>
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							参赛选手平均年龄
						</view>
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				
				<view class="item">
					
					<view class="row-between-center">
						<view class="row-h-center">
							<view class="require">
								*
							</view>
							<view class="title">
								参赛选手名单
							</view>
						</view>
						
						<image src="/static/images/add.png" class="upload-img4"></image>
						
					</view>
				
					<view class="file2 row-between-center">
						<view class="row-h-center">
							<image class="upload-img3" src="/static/images/person.png">
							</image>
							<view class="file-name">
								张三
							</view>
						</view>
						
					<image class="upload-img3" src="/static/images/del.png">
					</image>
						
					</view>
				</view>
				
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							上传作品
						</view>
					</view>
					<view class="upload col-center">
						<image class="upload-img2" src="/static/images/img.png">
						</image>
						<view class="upload-tip">
							上传照片
						</view>
					</view>
					<view class="upload col-center">
						<image class="upload-img2" src="/static/images/video.png">
						</image>
						<view class="upload-tip">
							上传视频
						</view>
					</view>
					<view class="file row-center">
						<image class="upload-img3" src="/static/images/file.png">
						</image>
						<view class="upload-tip2">
							上传文件
						</view>
					</view>
					<view class="file2 row-between-center">
						<view class="row-h-center">
							<image class="upload-img3" src="/static/images/folder.png">
							</image>
							<view class="file-name">
								这是文件名称
							</view>
						</view>
						
					<image class="upload-img3" src="/static/images/del.png">
					</image>
						
					</view>
				</view>
				
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							证书自提或邮寄
						</view>
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				
				
				<view class="item">
					<view class="row-h-center">
						<view class="require">
							*
						</view>
						<view class="title">
							收件地址（邮费自理）
						</view>
					</view>
					<view class="bg row-between-center">
						<view class="hint">
							请选择
						</view>
						<image src="/static/images/arrow.png" class="arrow"></image>
					</view>
				</view>
				
				
			</view>
		</scroll-view>
	
		<view class="bottom" @click="goSign()">
			<view class="bottom-btn row-center">
				提交报名信息
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderVue from '@/components/Header.vue'
	export default {
		components: {
			HeaderVue
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #FFB6C1 0%, #FCE5E5 100%);
	}
</style>
<style scoped lang="scss">
.item{
	margin-top: 40rpx;
	.title{
		margin-left: 10rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #8D2C48;
		line-height: 48rpx;
	}
	.require{
		font-weight: 400;
		font-size: 32rpx;
		color: #F61203;
		line-height: 48rpx;
	}
	.bg{
		padding: 0 30rpx;
		margin-top: 20rpx;
		height: 88rpx;
		background: #FFEFF3;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.2);
		border-radius: 16rpx;
		border: 2rpx solid #FDA2BC;
	}
	.hint{
		width: 700rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #D1A1AF;
		line-height: 48rpx;
	}
	.selected{
		width: 700rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #8D2C48;
		line-height: 48rpx;
	}
	.arrow{
		width: 20rpx;
		height: 20rpx;
	}
	.tip{
		font-weight: 400;
		font-size: 24rpx;
		color: #8D2C48;
		line-height: 36rpx;
	}
	.upload{
		margin-top: 40rpx;
		width: 200rpx;
		height: 200rpx;
		background: #FFEFF3;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.2);
		border-radius: 16rpx ;
		border: 2rpx solid #FDA2BC;
	
	}
	.upload-tip{
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #8D2C48;
		line-height: 40rpx;
	}
	.upload-tip2{
		margin-left: 12rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #8D2C48;
		line-height: 40rpx;
	}
	.upload-img{
		width: 32rpx;
		height: 32rpx;
	}
	.upload-img2{
		width: 64rpx;
		height: 64rpx;
	}
	.upload-img3{
		width: 40rpx;
		height: 40rpx;
	}
	.upload-img4{
		width: 48rpx;
		height: 48rpx;
	}
	.file{
		margin-top: 40rpx;
		width: 200rpx;
		height: 100rpx;
		background: #FFEFF3;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(255,69,116,0.2);
		border-radius: 16rpx ;
		border: 2rpx solid #FDA2BC;
	}
	.file2{
		padding: 0 30rpx;
		margin-top: 40rpx;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 16rpx ;
		border: 2rpx dashed rgba(119,55,4,0.4);
	}
	.file-name{
		margin-left: 12rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #8D2C48;
		line-height: 40rpx;
	}
}
	.bottom {

		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: linear-gradient(180deg, #FAB5CB 0%, #FF96AC 100%);
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		display: flex;
		padding: 20rpx;
		z-index: 1200;

		.bottom-btn {
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx -8rpx 16rpx 0rpx #FE92BF;
			border-radius: 46rpx;
			border: 4rpx solid;
			border-image: linear-gradient(180deg, rgba(250, 181, 203, 1), rgba(250, 181, 203, 1)) 0 0;
			font-weight: 600;
			font-size: 28rpx;
			color: #FF5280;
			line-height: 44rpx;
		}

	}
</style>
